    <style include="device-emulator-shared-styles iron-flex iron-flex-alignment
        iron-positioning md-select">
      cr-input {
        --cr-input-error-display: none;
        margin-bottom: var(--cr-form-field-bottom-spacing);
      }
    </style>
    <div class="layout vertical">
      <div class="element-label">
        <cr-icon-button iron-icon="device-emulator:battery-charging-full">
        </cr-icon-button>
        Power
      </div>
      <label>
        <span class="form-label">Battery state</span>
        <cr-radio-group selected="{{batteryState}}">
          <template is="dom-repeat" items="[[batteryStateOptions]]">
            <cr-radio-button name="[[item]]">[[item]]</cr-radio-button>
          </template>
        </cr-radio-group>
      </label>
      <iron-collapse opened="[[isBatteryPresent(batteryState)]]">
        <div class="layout vertical">
          <cr-input label="Battery percentage" value="[[batteryPercent]]"
              on-change="onBatteryPercentChange" type="number">
          </cr-input>
          <cr-input label="Seconds until empty" value="[[timeUntilEmpty]]"
              on-change="onTimeUntilEmptyChange" type="number">
          </cr-input>
          <cr-input label="Seconds until full" value="[[timeUntilFull]]"
              on-change="onTimeUntilFullChange" type="number">
          </cr-input>
        </div>
      </iron-collapse>

      <table class="devices-table">
        <tbody>
          <tr class="table-section-header">
            <td>Power sources</td>
            <td class="centered-cell-label">Connected</td>
            <td class="centered-cell-label">Role</td>
            <td class="centered-cell-label">Amps</td>
          </tr>
          <template is="dom-repeat" items="{{powerSourceOptions}}">
            <tr>
              <td class="alias-cell">[[item.name]]</td>
              <td class="control-cell">
                <cr-checkbox checked="{{item.connected}}"></cr-checkbox>
              </td>
              <td class="control-cell">
                <cr-button on-click="onSetAsSourceClick"
                    class$="[[cssClassForSetAsSource_(item,
                        selectedPowerSourceId)]]"
                    hidden$="[[!isDualRole(item)]]"
                    disabled="[[!canBecomeSource(
                        item, selectedPowerSourceId, powerSourceOptions.*)]]">
                  Set as source
                </cr-button>
                <div hidden$="[[isDualRole(item)]]">Source</div>
              </td>
              <td class="control-cell">
                <select class="md-select" disabled$="[[!item.variablePower]]"
                    on-change="onPowerChanged" value="[[item.power]]">
                  <option value="high">High</option>
                  <option value="low">Low</option>
                </select>
              </td>
          </template>
        </tbody>
      </table>
    </div>
